<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="空气质量检测与净化系统">
    <meta name="author" content="Christopher Lee">
    <title>空气质量</title>

    <!-- Bootstrap core CSS -->
    <link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="../static/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../static/custom_css/theme.css" rel="stylesheet">
</head>

<body role="document">

<!-- 这个是固定的导航栏 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">空气质量检测与净化系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.html">首页</a></li>
                <li class="active"><a href="air_quality.html">空气质量</a></li>
                <li><a href="system_desc.html">系统介绍</a></li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</nav>

<div class="container theme-showcase" role="main">
    <!--实时数据监测区域简要说明-->
    <div class="jumbotron" id="#tips" style="background-color: green; color: #ffffff">
        <p><strong>小贴士</strong></p>
        <ul>
            <li style="font-size: 150%">您可以通过控制按钮远程启动或者关闭空气净化器</li>
            <li style="font-size: 150%">您可以随时随地在任何设备上使用浏览器远程查看实时的空气质量监测数据</li>
        </ul>
    </div>

    <!--显示空气净化器控制区域-->
    <div class="page-header">
        <h2 align="middle">空气净化器启停控制</h2>
    </div>
    <div class="col-md-12 column">
        <div class="row clearfix" align="left">
            <div class="col-md-6 column">
                <img id="fan_img" width="150" height="150" align="left">
            </div>
            <div class="col-md-6 column" align="right">
                <button id="fan_start" type="button" class="btn btn-lg btn-success" style="width:40%">启动</button>
                <br/>
                <br/>
                <br/>
                <br/>
                <button id="fan_stop" type="button" class="btn btn-lg btn-default" style="width:40%">停止</button>
                <br/>
            </div>
        </div>
    </div>

    <!--数据的曲线图显示区域-->
    <div class="page-header">
        <h2 align="middle">空气质量实时检测数据</h2>
    </div>
    <div class="container">
        <!--显示温度曲线图-->
        <h1 align="middle" style="font-size: 200%">
            <span id="temp_label" class="label label-default" style="background-color: mediumvioletred">温度</span>
        </h1>

        <div id="temp_chart"></div>

        <!--显示湿度曲线图-->
        <h1 align="middle" style="font-size: 200%">
            <span id="hum_label" class="label label-default" style="background-color: seagreen">湿度</span>
        </h1>

        <div id="hum_chart"></div>

        <!--显示二氧化碳浓度曲线图-->
        <h1 align="middle" style="font-size: 200%">
            <span id="co2_label" class="label label-default" style="background-color: darkslateblue">二氧化碳浓度</span>
        </h1>

        <div id="co2_chart"></div>

        <!--显示粉尘浓度曲线图-->
        <h1 align="middle" style="font-size: 200%">
            <span id="dust_label" class="label label-default" style="background-color: saddlebrown">粉尘浓度</span>
        </h1>

        <div id="dust_chart"></div>
    </div>
</div>

<!-- Placed at the end of the document so the pages load faster -->
<script src="../static/jquery/jquery-1.11.2.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/flot/jquery.flot.js"></script>
<script src="../static/flot/jquery.flot.time.js"></script>
<script>
    // 函数：空气净化器启动按钮触发
    $("#fan_start").click(function () {
        $.ajax({
            url: "set_ac_pwr_status",
            data: {
                value: 1
            },
            type: "post",
            cache: false,
            dataType: "json",
            success: function (get) {
                if (get.value == 1) {
                    $("#fan_img").attr("src", "../static/images/fan_running.gif");
                }
            }
        });
    });
    // 函数：空气净化器停止按钮触发
    $("#fan_stop").click(function () {
        $.ajax({
            url: "set_ac_pwr_status",
            data: {
                value: 0
            },
            type: "post",
            cache: false,
            dataType: "json",
            success: function (get) {
                if (get.value == 0) {
                    $("#fan_img").attr("src", "../static/images/fan_stop.png");
                }
            }
        });
    });

    // 与flot相关的函数
    var options =
    {
        lines: {
            show: true,
            lineWidth: 3.5
        },
        xaxis: {
            mode: "time",
            tickSize: [30, 'second'],
            timeformat: "%H:%M:%S",
            timezone: "browser"
        },
        yaxis: {
            // 自动缩放，这个比较好。
            autoscaleMargin: 2
        },
        legend: {
            show: true
        }
    };

    var data = [];

    //
    // 当页面加载完毕，该函数会被触发执行
    //
    $(document).ready(function () {
        // 查询开关状态
        getAcPwrStatus();

        // 获取元素的像素便宜，从而据此设置图表的显示宽度。
        var width = document.body.clientWidth - 2 * ($("#fan_img").offset().left);
        var chartSize = {
            "width": width,
            "height": width / 2
        };
        // 当页面加载完毕后，设置图表的宽度，以适应屏幕。
        $("#temp_chart").css(chartSize);
        $("#hum_chart").css(chartSize);
        $("#co2_chart").css(chartSize);
        $("#dust_chart").css(chartSize);

        // 对数各个传感器表进行填充。
        fetchData();
    });

    //　转换得到本地时间。
    function getLocalTime(nS) {
        return new Date(parseInt(nS)).toLocaleString();
    }

    // 定时去服务器查询开关状态，做到同步显示。提高体验效果。
    function getAcPwrStatus() {
        // 去查看空气净化器的开关状态，从而决定使用动态还是静态图片
        $.ajax({
            url: "get_ac_pwr_status",
            type: "get",
            cache: false,
            dataType: "json",
            success: function (get) {
                if (get.value == 1) {
                    $("#fan_img").attr("src", "../static/images/fan_running.gif");
                }
                else if (get.value == 0) {
                    $("#fan_img").attr("src", "../static/images/fan_stop.png");
                }
            }
        });
        setTimeout(getAcPwrStatus, 1000);
    }

    // 该函数用来定时去发送post请求，获取存储在数据库中的传感器数据，并将曲线绘制出来。
    function fetchData() {
        function onDataReceived(series) {
            //
            // 更新温度显示表
            //
            var data = {
                label: "温度(℃)",
                color: $("#temp_label").css("background-color"),
                data: series.temp,
            };
            $.plot("#temp_chart", [data], options);

            //
            // 更新湿度显示表
            //
            data.label = "湿度(%RH)";
            data.data = series.hum;
            data.color = $("#hum_label").css("background-color");
            $.plot("#hum_chart", [data], options);

            //
            // 更新CO2浓度显示表
            //
            data.label = "二氧化碳浓度(ppm)";
            data.data = series.co2;
            data.color = $("#co2_label").css("background-color");
            options.yaxis.minTickSize = 10;
            $.plot("#co2_chart", [data], options);

            //
            // 更新粉尘浓度显示表
            //
            data.label = "粉尘浓度(ppercf)";
            data.data = series.dust;
            data.color = $("#dust_label").css("background-color");
            options.yaxis.minTickSize = 10;
            $.plot("#dust_chart", [data], options);
        }

        $.ajax({
            url: "get_data",
            type: "GET",
            dataType: "json",
            cache: false,
            success: onDataReceived
        });

        // 每隔4s更新曲线
        setTimeout("fetchData()", 4000);
    }
</script>
</body>
</html>
